<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!--商品详情页面 -->
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>商品详情-页面</title>


<!--引入Css样式类库文件-->
<link rel="stylesheet" href="homepageAndDetail/css/product_detail.css">
<link href="homepageAndDetail/css/experience.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="homepageAndDetail/js/jquery-2.1.1.js"></script>

<script type="text/javascript">

	$(function(){
		
		$("#addnum").click(function(){
			var num=$("#needNum").val();//需求量
			num=parseInt(num);
			var sum=$("#hassum").html();//商品库存
			sum=parseInt(sum);
			if(num<sum){
				$(".input").val(++num);
			}

		});
		
		
		$(".reduce").click(function(){
			var num=$("#needNum").val();//需求量
			num=parseInt(num);
			var sum=$("#hassum").html();//商品库存
			sum=parseInt(sum);
			if(num<=sum&&num>1){
				$(".input").val(--num);
			}
		});

	 // 客服的透明显示隐藏
	 $('#cs_title').click(function(){

         //判断是否隐藏！
         if($('#cs_online').is(":hidden")){
             
             $('#cs_online').fadeIn(2000);
         }else{
              $("#cs_online").fadeOut(2000);
         }
     });
     	
});
	function addToCar(){
      var num = $('#needNum').val();
      var gid = ${good.goodsId };
      window.location="${pageContext.request.contextPath}/addToCar?goodid="+gid+"&goodnum="+num;
     }
</script>

</head>
<body>

   <jsp:include page="topbar.jsp"></jsp:include>
   <div class="Detailspage">
		<ul class="goodsphotos">

				<div class="bigphoto" ><img id="proLogo" style="width: 400px;height:400px; margin:0 auto;" src="${good.goodsImg }"></div>

				<ol class="maintheme">
					<div class="title"><a href="#"><p id="title"></p></a></div>
					<div class="image01"><img src=""></div>
					<div class="describe"><p id="describe"></p></div>
					<div class="price-service">
						<p class="price-discribe">售价</p>
						<p class="price">${good.goodsPrice }￥<span id="pro_price"></span></p>
						<div class="service01">
							<p class="service_describe01">卖家</p>
							<p class="service_describe02" id="username">${good.userName }</p>
						</div>
						<div class="service02">
							<p class="service_describe01">发布时间</p>
							<p class="service_describe02" id="time">${good.issueTime }</p>
						</div>

						<div class="service02">
							<p class="service_describe01">库存</p>
							<p class="service_describe02" id="hassum">${good.goodsNumber }</p>
						</div>

					</div>

					<!-- 数量选择 start -->
					<div class="amount">
						<p class="count">数量</p>
						<div class="reduce">
							<img src="images/jian.jpg" style="cursor:pointer"/>
						</div>
                        	<input class="input" value="1" id="needNum" />
						<div id="addnum" class="add"  >
							<img  src="images/jia.jpg" style="cursor:pointer"/>
						</div>

					</div>
					<!-- 数量选择 end -->

					<!-- 加购物车 start -->
					<div class="purchase"><a onclick="addToCar();"><img src="homepageAndDetail/images/addtocart.png"></a></div>
					<!-- 加购物车 end -->

					<div class="purchase"><a href="${pageContext.request.contextPath }/SearchComment?id=${good.goodsId }"><img src="homepageAndDetail/images/comment.png"></a></div>


			</ol>

		</ul>



	</div>
<div id="cs_on">
    <span id="cs_title">
        <img style="padding-top:5px;" src="${pageContext.request.contextPath }/homepageAndDetail/img/experience/qq.png" width="20">在线客服
    </span>
</div>
    <div id="cs_online" class="cs_online">

        <!-- 机器人div -->
        <div class="wapper_ex">

            <div class="dialogue">
                <div class="roll" style="display: none;"><span class="point" style="top: 326px;"></span></div>
                <div class="displayArea">
                <div class="diswap">

                </div>
                </div>
                <div class="writeArea clearfix">
                    <input type="text" maxlength="200" placeholder="" id='printText'>
                    <span>发 送</span>
                </div>
            </div>
        </div>

    </div>





<script>


    //var userid;
    function member(){
        var memArr = ['你好，最近过得怎么样？','嗨，最近想我没有？[羞涩]','HI，[记忆系统]已上线，从今天起我会牢记您的大名！来试试看吧~','嗨，有什么想对我聊聊么？',];
        var num = Math.floor(Math.random()*memArr.length);
        $('#member').html(memArr[num]+'<i></i>')
    }
    member();
    var arrPLace = ['请可以发送“菜单”完成自助购买','请可以发送“菜单”完成自助购买','请可以发送“菜单”完成自助购买','请可以发送“菜单”完成自助购买','请可以发送“菜单”完成自助购买'];
    var num = Math.floor(Math.random()*5);
    $('.writeArea input').attr('placeholder',arrPLace[num]);

    var webTuring = {
        point:function(){
            var sum = 0 ;
            $('.roll span').mousedown(function(ev){
                var startT = ev.pageY;
                var t = parseFloat($('.point').css('top')) ;
                add();
                $('.wapper_ex').addClass('stop');
                $(document).mousemove(function(ev){
                    var moveT = ev.pageY;
                    var m = t+moveT-startT;
                    if(m<0){
                        m = 0;
                    }
                    if(m>326){
                        m = 326;
                    }
                    $('.point').css('top',m );
                    var newM = m/326 *(sum-364);
                    $('.displayArea').scrollTop(newM);
                })
                $(document).mouseup(function(){
                    $('.wapper_ex').removeClass('stop');
                    $(document).unbind('mousemove');
                })
            })
            function add(){
                sum = 0;
                $('.diswap>div').each(function(){
                    sum+=$(this).outerHeight(true);
                })
            }
            $('.displayArea').scroll(function(){
                add();
                $('.point').css('top', $('.displayArea').scrollTop()/(sum-364)*326 );
            })

            $('.example li').click(function(){
                $('.bg_ex').show();
                $('.btm1').html( $(this).attr('value1')).show();
                if( $(this).attr('value2') )  $('.btm2').html( $(this).attr('value2')).show();
                if( $(this).attr('value3') )  $('.btm3').html( $(this).attr('value3')).show();
            })
            $('.close').click(function(){
                $('.bg_ex').hide();
                $('.btm1').hide();
                $('.btm2').hide();
                $('.btm3').hide();
            })
            var timerTenMin = null;
            var memNum = 0;
            function memberth(){
                var memArr = ['你好，欢迎光临本店','机器人阅悦开始为您服务...','你好，欢迎光临本店','机器人阅悦开始为您服务...','您可以发送“菜单”完成自助购买','您可以发送“功能”完成自助购买',];
                var num = Math.floor(Math.random()*memArr.length);
                return memArr[num];
            }
            function timeTenMin(){
                if(memNum>=3){
                    return;
                }
                clearInterval(timerTenMin);
                timerTenMin = setInterval(function(){
                    var yhy = memberth();
                    //加上特殊的<a>标签，用于点击！
                    $('.diswap').append('<div class="rotWord clearfix"> <span></span> <p>'+yhy+'<i></i></p></div>');
                    memNum++;
                    if(memNum>=3){
                        clearInterval(timerTenMin);
                        return;
                    }
                    scrollBtm();
                },1000) //1秒自动回复！
            }
            timeTenMin();
            $('.bg_ex p:not(.tit)').click(function(){
                $('.diswap').append( '<div class="mWord clearfix"><span></span><p>'+$(this).html()+'<i></i></p></div>' );
                scrollBtm();
                $('.close').click();
                submitvalues($(this).html());
                timeTenMin();
            })
            $('.writeArea span').click(function(){

                timeTenMin();
                var val = $.trim( $('.writeArea input').val() );
                if(val == ''){
                    return;
                }
                if(val=='绑定'){
                    $('.diswap').append( '<div class="mWord clearfix"><span></span><p>'+val+'<i></i></p></div>' );
                    $('.diswap').append( '<div class="rotWord clearfix"> <span></span> <p>'+"用于触发特殊回复"+'<i></i></p></div>' );
                    $('.writeArea input').val('');
                    scrollBtm();
                    return;
                }
                $('.writeArea input').attr('placeholder','');
                $('.diswap').append( '<div class="mWord clearfix"><span></span><p>'+val+'<i></i></p></div>' );
                scrollBtm();

                //触发Ajax，进行后台数据处理
                submitvalues(val);
                $('.writeArea input').val('');
            })
            $('.displayArea').mouseover(function(){
                if(sum>374) $('.roll').show();
            })
            $('.displayArea').mouseout(function(){
                if(sum>374) $('.roll').hide();
            })
            $('.roll').mouseover(function(){
                $('.roll').show();
            })

            //回车发送
            $(window).keydown(function(event){
                switch(event.keyCode){
                    case 13:$('.writeArea span').click();
                        break;
                }
            })
            function scrollBtm(){
                add();
                if(sum-364<0)  return;
                $('.displayArea').scrollTop(sum-364);
            }

            function submitvalues(content){


                //data: {"info":content,'userid':userid,"_xsrf":''}, 其实可以这样传数据
                $.ajax({

                    type: "POST",
                    url: "${pageContext.request.contextPath }/turingServlet",
                    data: "info="+content,

                    success: function(data) {



                        //将json格式字符串转为js对象
                        var dataObj = eval('('+data+')');
                        if(dataObj.code==100000){
                            //第一种格式
                            $('.diswap').append( '<div class="rotWord clearfix"> <span></span> <p>'+dataObj.text+'<i></i></p></div>' );
                            //滚动刷屏
                            scrollBtm();

                        }else if(dataObj.code==200000){

                            $('.diswap').append( '<div class="rotWord clearfix"> <span></span> <p>'+dataObj.text+'<a href="'+dataObj.url+'" target="_blank">打开页面</a><i></i></p></div>' );
                            scrollBtm();

                        }else if(dataObj.code==302000){
                            $('.diswap').append('<div class="rotWord1 clearfix"> <span></span> <div class="findMsg"> <i></i> <div class="main"><div class="info"> <a href="'+dataObj.list[0].detailurl+'" target="_blank"> <div class="make">'+dataObj.list[0].article+'-'+dataObj.list[0].source+'</div> </a></div> <div class="line"></div> <div class="info"> <a href="'+dataObj.list[1].detailurl+'" target="_blank"> <div class="make">'+dataObj.list[1].article+'-'+dataObj.list[1].source+'</div> </a></div> <div class="line"></div> <div class="info"> <a href="'+dataObj.list[2].detailurl+'" target="_blank"> <div class="make">'+dataObj.list[2].article+'-'+dataObj.list[2].source+'</div> </a> </div></div> </div> </div>')
                            scrollBtm();

                        }else{
                            $('.diswap').append( '<div class="rotWord clearfix"> <span></span> <p>对不起，系统错误，暂时无法提供服务！<i></i></p></div>' );
                            //滚动刷屏
                            scrollBtm();
                        }
                    }
                });
            }
            return this;
        }
    }

    webTuring.point();

    //点击超链接触发
    $(function(){

        //自定义文本时，可对于要点击的文本用如下超链接括起来
        //<a href="javascript:void(0);" class="onclicktotext">'+文本内容！+'</a>


        //diswap : 页面中本来就存在
        //onclicktotext ： 用脚本添加的对象！
        $('.diswap').on('click','.t',function(){
            var str = $(this).text();//获取当前点击对象的文本
            $('#printText').val(str);//将其值放置进入发送文本框！
        });

    });

</script>

</body>
</html>